.row {
  max-width: $grid-width;
  margin: 0 auto;

  @include clearfix;

  &:not(:last-child) {
    margin-bottom: $gutter-vertical;
  }

  // 选中所有 class 带有以 col- 开头的
  [class^="col-"] {
    float: left;

    &:not(:last-child) {
      margin-right: $gutter-horizontal;
    }
  }

  .col-1-of-2 {
    width: calc((100% - #{$gutter-horizontal}) / 2);
  }
  .col-1-of-3 {
    width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
  }
  .col-2-of-3 {
    width: calc(
      2 * (100% - 2 * #{$gutter-horizontal}) / 3 + #{$gutter-horizontal}
    );
  }

  .col-1-of-4 {
    width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
  }
  .col-2-of-4 {
    width: calc(
      2 * (100% - 3 * #{$gutter-horizontal}) / 4 + #{$gutter-horizontal}
    );
  }
  .col-3-of-4 {
    width: calc(
      3 * (100% - 3 * #{$gutter-horizontal}) / 4 + 2 * #{$gutter-horizontal}
    );
  }
}
